function Tag(options={}) {
    const {el="#root",activeI=0,colorArr=["red","yellow","green"]} = options;
    const root = document.querySelector(el);
    this.btns = root.querySelectorAll("button");
    this.divs = root.querySelectorAll("div");
    this.colorArr = colorArr;
    this.activeI = activeI;
    this.init();
}

Object.assign(Tag.prototype, {
    init() {
        for (let i = 0; i < this.btns.length; i++) {
            this.hide(i);
            this.btns[i].onclick = function () {
                if (i === this.activeI) return;
                this.hide();
                this.activeI = i;
                this.show();
            }.bind(this)
        }
        this.show();
    },
    // 显示当前的div,并将当前的按钮增加背景颜色
    show() {
        this.btns[this.activeI].style.background = this.divs[this.activeI].style.background = this.colorArr[this.activeI];
        this.divs[this.activeI].style.display = "block";
    },
    hide(i=this.activeI) {
        this.btns[i].style.background = null;
        this.divs[i].style.display = "none";
    }
});
export default Tag;